<script setup>
import { onBeforeMount, reactive, ref } from 'vue';
import { makeMockData } from './utils.js';

const repeatRef = ref(null);

const paginationOptions = [
  { label: '滚动加载', value: 'Scroll' },
  { label: '按键分页', value: 'Click' },
];
const formData = reactive({
  paginationType: 'Scroll',
  pageSize: 20,
  preloadOffset: 300,
});

const state = reactive({
  dataList: [],
  hasLoadedAll: false,
  total: 0,
  pageIndex: 0,
});

const fetchPageData = (index, size, done) => {
  // 模拟获取数据
  const { List, Total } = makeMockData(index, size, 86);

  return new Promise(resolve => {
    setTimeout(() => {
      state.dataList = state.dataList.concat(List || []);
      state.total = Total;
      state.hasLoadedAll = state.dataList.length >= Total;
      if (List && List.length) {
        state.pageIndex = index;
      }
      console.log('fetchPageData', `${state.dataList.length}/${Total}`);
      // 获取完数据，必须调用 done 函数，传入是否数据已全部加载
      done(state.hasLoadedAll);
      resolve();
    }, 400);
  });
};

const onScrollLoad = async (index, size, done) => {
  try {
    await fetchPageData(index, size, done);
    console.log('done', state.hasLoadedAll);
  } catch (error) {
    console.log(error);
  }
};

/**
 * 【下拉刷新】时应清空列表数据
 *  - 如果使用 v-model:list="state.dataList" 那么组件内部可以清空列表数据
 *  - 如果使用 :list="state.dataList" 那么请务必在此清空列表数据
 * 另外根据需要清理一下页面其它数据
 */
const onRefresh = async _ => {
  // 根据需要添加页面状态清理
};

const onReset = () => {
  if (repeatRef.value) {
    repeatRef.value.reload();
  }
}

const reset = () => {
  state.dataList = [];
  state.hasLoadedAll = false;
  state.total = 0;

  formData.preloadOffset = 300;
  formData.pageSize = 20;

  onReset();
};

onBeforeMount(() => {
});
</script>

<template>
  <div class="repeat-demo">
    <t-form style="max-width:200px">
      <!-- <t-select
        v-model="formData.paginationType"
        :options="paginationOptions"
        label="分页的加载方式"
        disabled
      /> -->

      <t-field label="分页条数">
        <template #control>
          <t-input
            v-model.number="formData.pageSize"
            type="number"
            step="10"
            :min="10"
            :max="50"
            filled
            style=""
          />
        </template>
      </t-field>
      <t-field label="提前加载数据-距离底部的偏移量">
        <template #control>
          <t-input
            v-model.number="formData.preloadOffset"
            type="number"
            step="10"
            :min="50"
            :max="500"
            filled
            style=""
          />
        </template>
      </t-field>
    </t-form>

    <ul>
      <li>数据总条数：{{ state.total }}</li>
      <li>当前数据条数：{{ state.dataList.length }}</li>
      <li>当前已获取页：{{ state.pageIndex }}</li>
    </ul>

    <t-button color="primary q-mr-md" @click="reset">重置</t-button>
    <t-button color="primary" @click="onReset">重新加载 Reload</t-button>
    <p>&nbsp;</p>
    <t-separator></t-separator>
    <p>&nbsp;</p>

    <t-repeat
      ref="repeatRef"
      v-model:list="state.dataList"
      :offset="formData.preloadOffset"
      :page-size="formData.pageSize"
      :fill-mode="`auto`"
      :height="`500px`"
      :auto-load="true"
      :pull-refresh="true"
      class="t-repeat q-pa-md"
      style="border:1px solid #e0e2e5;"
      @scroll-load="onScrollLoad"
      @pull-refresh="onRefresh"
    >
      <template #default>
        <t-item v-for="row in state.dataList" :key="row.id" clickable v-ripple>
          <t-item-section>
            <t-item-label>{{ row.description }}</t-item-label>
          </t-item-section>
        </t-item>
      </template>
    </t-repeat>
  </div>
</template>
